<template>
	<div class="com-container">
		<div class="com-chart" ref="hot_ref"></div>
		<i class="iconfont arr-left" @click="toLeft" :style="comStyle">&#xe6ef;</i>
		<i class="iconfont arr-right" @click="toRight" :style="comStyle">&#xe6ed;</i>
		<span class="cat-name" :style="comStyle">{{catName}}</span>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getThemeValue
	} from '@/utils/theme_utils'
	export default {
		name: 'Hot',
		data() {
			return {
				chartInstance: null,
				allData: null,
				currentIndex: 0,
				echartoption: {},
				titleFontSize: 0
			}
		},
		created() {
			this.$socket.registerCallBack('hotData', this.getData)
		},
		computed: {
			catName() {
				if (!this.allData) {
					return '';
				} else {
					return this.allData[this.currentIndex].name
				}
			},
			comStyle() {
				return {
					fontSize: this.titleFontSize + "px",
					color: getThemeValue(this.theme).titleColor
				}
			},
			...mapState(['theme'])
		},
		mounted() {
			this.initChart();
			//this.getData();
			this.$socket.send({
				action: 'getData',
				socketType: 'hotData',
				chartName: 'hot',
				value: ''
			})
			window.addEventListener("resize", this.screenAdapter);
			this.screenAdapter()
		},
		destroyed() {
			window.removeEventListener("resize", this.screenAdapter);
			this.$socket.unRegisterCallBack('hotData');
		},
		methods: {
			//初始化图表
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.hot_ref, this.theme);
				this.echartoption = {
					backgroundColor: getThemeValue(this.theme).backgroundColor,
					title: {
						text: '▎ 热销商品的占比',
						left: 20,
						top: 20
					},
					legend: {
						top: '15%',
						icon: 'circle'
					},
					tooltip: {
						show: true,
						formatter: arg => {
							const catetory = arg.data.children;
							let totle = 0;
							catetory.forEach(item => {
								totle += item.value
							});
							let retStr = "";
							catetory.forEach(item => {
								retStr += `
									${item.name}:${parseInt(item.value/totle*100)+"%"}
									<br/>
								`
							});
							return retStr;
						}
					},
					series: [{
						type: "pie",
						label: {
							show: false
						},
						emphasis: {
							label: {
								show: true,
								color: "auto",
							},
							labelLine: {
								show: false
							}
						}
					}]
				};
				this.chartInstance.setOption(this.echartoption);
			},
			//获取数据
			getData(ret) {
				// const {
				// 	data: ret
				// } = await this.$http.get("hot");
				this.allData = ret;
				this.updataChart()
			},
			//更新图表
			updataChart() {
				const legendData = this.allData[this.currentIndex].children.map(item => {
					return item.name
				});
				const seriesData = this.allData[this.currentIndex].children.map(item => {
					return {
						name: item.name,
						value: item.value,
						children: item.children
					}
				});
				const dataoption = {
					legend: {
						data: legendData
					},
					series: [{
						data: seriesData
					}]
				};
				this.chartInstance.setOption(dataoption);
			},
			screenAdapter() {
				this.titleFontSize = this.$refs.hot_ref.offsetWidth / 100 * 3.6;
				const adapterOtion = {
					title: {
						textStyle: {
							fontSize: this.titleFontSize
						}
					},
					legend: {
						itemWidth: this.titleFontSize / 2,
						itemHeigth: this.titleFontSize / 2,
						itemGap: this.titleFontSize / 2,
						textStyle: {
							fontSize: this.titleFontSize / 2,
							color: "auto"
						},

						color: "auto"
					},
					series: [{
						radius: this.titleFontSize * 4.5,
						center: ["50%", "60%"]
					}]
				};
				this.chartInstance.setOption(adapterOtion);
				this.chartInstance.resize();
			},
			toLeft() {
				this.currentIndex--;
				if (this.currentIndex < 0) {
					this.currentIndex = this.allData.length - 1;
				}
				this.updataChart();
			},
			toRight() {
				this.currentIndex++;
				if (this.currentIndex > this.allData.length - 1) {
					this.currentIndex = 0;
				}
				this.updataChart();
			},
		},
		watch: {
			theme() {
				console.log('主题切换了')
				this.chartInstance.dispose() // 销毁当前的图表
				this.initChart() // 重新以最新的主题名称初始化图表对象
				this.screenAdapter() // 完成屏幕的适配
				this.updataChart() // 更新图表的展示
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.arr-left {
		position: absolute;
		left: 10%;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		color: white;
	}

	.arr-right {
		position: absolute;
		right: 10%;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		color: white;
	}

	.cat-name {
		position: absolute;
		left: 80%;
		bottom: 10%;
		color: white;
	}
</style>
